<template>
  <div id="app">
    <!-- 顶部logo、定位、搜索栏等 -->
    <div class="header">
      <UserLocation
        :location_info="location_info"
        :presentPosition="presentPosition"
        :todayData="todayData"
        @upDateCityId="updateByCityId"
      >
      </UserLocation>
    </div>
    <!-- 中间主体部分 -->
    <div class="content clearfix">
      <!-- 显示当前天气 -->
      <!-- <PresentWeather v-bind:city_id="location_info.city_id"></PresentWeather> -->
      <PresentWeather></PresentWeather>
      <!-- 显示未来24小时逐小时天气预报 -->
      <!-- <EachHour v-bind:city_id="location_info.city_id"></EachHour> -->
      <EachHour></EachHour>
      <!-- 显示未来七天逐日天气预报 -->
      <!-- <EachDay v-bind:city_id="location_info.city_id" :lc_name="location_info.lc_name" @getTodaytData="getTodaytData"></EachDay> -->
      <EachDay
        :lc_name="location_info.lc_name"
        @getTodaytData="getTodaytData"
      ></EachDay>
      <!-- 显示当前生活指数 -->
      <!-- <LiveIndex v-bind:city_id="location_info.city_id"></LiveIndex> -->
      <LiveIndex></LiveIndex>
    </div>
    <!-- 底部相关链接以及copyright等 -->
    <footer>
      <div class="data_sourse">
        <img :src="img_url + 'sponsor1.png'" />
        <img :src="img_url + 'sponsor2.png'" />
        <img :src="img_url + 'sponsor3.png'" />
      </div>
      <ul class="related_web">
        <li><a href="http://www.tencent.com/">关于腾讯</a></li>
        <li>
          <a href="http://www.tencent.com/index_e.shtml">About Tencent</a>
        </li>
        <li><a href="http://www.qq.com/contract.shtml">服务协议</a></li>
        <li><a href="http://www.qq.com/privacy.htm">隐私政策</a></li>
        <li><a href="http://open.qq.com/">开放平台</a></li>
        <li><a href="http://www.tencentmind.com/">广告服务</a></li>
        <li><a href="http://hr.tencent.com/">腾讯招聘</a></li>
        <li><a href="http://gongyi.qq.com/">腾讯公益</a></li>
        <li><a href="http://service.qq.com/">客服中心</a></li>
        <li>
          <a href="http://news.qq.com/zt2014/2014qtnews/ccybspxd.htm"
            >举报中心</a
          >
        </li>
        <li><a href="http://www.qq.com/map/">导航网站</a></li>
      </ul>
      <div class="copy_right">
        Copyright © 1998 - 2020 Tencent. All Rights Reserved
      </div>
    </footer>
  </div>
</template>

<script>
// 引入各个组件文件
import UserLocation from "./components/UserLocation.vue";
import PresentWeather from "./components/PresentWeather.vue";
import EachHour from "./components/EachHour.vue";
import EachDay from "./components/EachDay.vue";
import LiveIndex from "./components/LiveIndex.vue";

export default {
  name: "App",
  // 注册组件
  components: {
    UserLocation,
    PresentWeather,
    EachHour,
    EachDay,
    LiveIndex,
  },
  // 组件中的数据
  data: function () {
    return {
      // 存放选中城市的信息，它将传递给App.vue组件下挂载的所有子组件
      location_info: {
        adm2: "", // 当前城市的上上级行政区划
        adm1: "", // 当前城市的上一级行政区划
        lc_name: "", // 当前城市的名称
        city_id: "", // 当前城市的id
      },
      // 存放当前定位的城市信息，传递给UserLocation组件，方便在改变城市后快速回到定位城市
      presentPosition: {
        position: "", // 定位获得的当前城市名称
        id: "", // 定位获得的当前城市id
      },
      /* 	
					用于存放当天选中的城市天气信息
					来自于PresentWeather组件获取的数据
					传递给UserLocation组件
					在用户关注该城市的时候放入收藏城市的信息中
				*/
      todayData: {
        id: "", // 当前城市id
        name: "",
        icon: "", // 当天白天天气对应的图片
        textDay: "", // 白天天气描述
        textNight: "", // 晚上天气描述
        tempMin: "", // 最高温度
        tempMax: "", // 最低温度
      },
    };
  },
  watch: {
    cityId(newId) {
      this.$axios
        .get(
          "https://geoapi.heweather.net/v2/city/lookup?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=" +
            newId
        )
        .then((res) => {
          // 当切换城市的时候会更新对应的id
          // this.$store.commit('updateCityId',this.location_info.city_id);
          this.location_info.city_id = res.data.location[0].id;
          this.location_info.lc_name = res.data.location[0].name;
          this.location_info.adm1 = res.data.location[0].adm1;
          this.location_info.adm2 = res.data.location[0].adm2;
        });
    },
  },
  methods: {
    // 根据UserLocation中切换城市（搜索、点击热门城市、点击收藏了的城市）传回来的城市id更新选中城市信息
    updateByCityId: function () {
      // 	// 根据id请求数据
      // 	this.$axios
      // 		.get('https://geoapi.heweather.net/v2/city/lookup?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=' + newId)
      // 		.then(res => {
      // 			// 当切换城市的时候会更新对应的id
      // 			this.$store.commit('updateCityId',this.location_info.city_id);
      // 			this.location_info.city_id = res.data.location[0].id;
      // 			this.location_info.lc_name = res.data.location[0].name;
      // 			this.location_info.adm1 = res.data.location[0].adm1;
      // 			this.location_info.adm2 = res.data.location[0].adm2
      // 		})
    },
    // 处理当前位置信息
    handlePosition: function (a) {
      // 使用正则分割异步请求获得的城市信息
      let fullLocation = a.split(/省|自治区|市|县|区/);
      // 由于使用该方法分割后得到的数组最后有一个空串，需要用pop方法弹出
      fullLocation.pop();
      // 判断得到的是三个级别的行政区划信息或是两级城市信息，用解构赋值，更新location_info中的信息
      if (fullLocation.length == 3) {
        [
          this.location_info.adm2,
          this.location_info.adm1,
          this.location_info.lc_name,
        ] = fullLocation;
      } else if (fullLocation.length == 2) {
        // 如果只有两级，如广东省中山市，则不用给adm2赋值
        [this.location_info.adm1, this.location_info.lc_name] = fullLocation;
      }
      // 将当前定位的信息存储到presentPosition中
      this.presentPosition.position = this.location_info.lc_name;
    },
    // 用于接收来自EachDay组件传回的当天天气信息
    getTodaytData: function (data) {
      this.todayData = data;
    },
  },
  computed: {
    // 用于保存当前组件下图片的src路径
    img_url: function () {
      return process.env.BASE_URL;
    },

    cityId() {
      return this.$store.state.cityId;
    },
  },
  // 当App.vue创建完成的时候请求数据
  created: function () {
    this.handlePosition("陕西省西安市");
    // 请求当前定位信息
    this.$axios
      // .get('http://8.129.16.193:8089/ip')
      // .then(res => {
      // 	// 将异步请求到的定位信息给专门处理位置信息的函数handlePosition处理
      // 	this.handlePosition(res)
      // 	// 并将处理后的数据作为参数传递给下一个请求
      // 	// 请求当前位置的城市id
      // 	return this.$axios.get('https://geoapi.heweather.net/v2/city/lookup?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=' + this.location_info.lc_name+'&adm='+this.location_info.adm2 + this.location_info.adm1);
      // })
      .get(
        "https://geoapi.heweather.net/v2/city/lookup?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=" +
          this.location_info.lc_name +
          "&adm=" +
          this.location_info.adm2 +
          this.location_info.adm1
      )
      .then((res) => {
        console.log(res);
        if (res.data.code == "200") {
          // 当能成功请求到数据时，改变city_id的值
          this.$store.commit("updateCityId", res.data.location[0].id);
          this.location_info.city_id = res.data.location[0].id;
          this.presentPosition.id = res.data.location[0].id;
        } else {
          console.log(555);
          // 当请求失败时，使用默认值渲染进行渲染
          this.location_info.adm1 = "北京市";
          this.location_info.lc_name = "西城区";
          this.location_info.city_id = "101011700";
          // 将当前位置也设置为西城
          this.presentPosition.id = "101011700";
          this.presentPosition.position = "西城";
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less">
@shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
@marginMid: 0 auto;
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  font-size: 0.9em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}
body {
  background: no-repeat top center #f6f9fe;
  background-size: auto 595px;
  background-image: url(https://mat1.gtimg.com/pingjs/ext2020/weather/2017/images/bg-cb2b2552e8.jpg);
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .header {
    height: 64px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-collapse: collapse;
  }
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.shadow {
  box-shadow: @shadow;
}
.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
footer {
  width: 100%;
  height: 256px;
  margin-top: 40px;
  background-color: #3a4570;
  font-size: 12px;
  color: #fff;
  text-align: center;
  .data_sourse {
    margin: @marginMid;
    img {
      margin: 40px 25px;
    }
  }
  .related_web {
    margin: @marginMid;
    li {
      display: inline-block;
      padding: 0 5px;
      line-height: 12px;
      border-right: 1px solid #fff;
      a {
        color: #fff;
      }
    }
    li:last-child {
      border-right: 0px;
    }
  }
  .copy_right {
    margin: @marginMid;
    margin-top: 30px;
  }
}
</style>
	